  <template>
    <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100  ">
      <div class="max-w-4xl mx-auto px-4 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-gray-900  mb-3">
            Build Your <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Expert AI Agent</span>
          </h1>
          <p class="text-gray-600  max-w-2xl mx-auto">
            Create a specialized AI that works 24/7 to generate income from your expertise
          </p>
        </div>

        <form @submit.prevent="handleSubmit">
          <!-- Main Content -->
          <div class="space-y-6">
            <!-- Basic Information Section -->
            <div class="bg-white  rounded-xl shadow-sm border border-gray-200  p-6">
              <div class="flex items-center mb-4">
                <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900 ">Basic Information</h2>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label class="block text-xs font-medium text-gray-700  mb-1">Agent Name</label>
                  <input 
                    v-model="form.name"
                    type="text" 
                    required
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500/20 focus:border-blue-500 bg-white  text-gray-900  transition-all duration-200 text-sm"
                    placeholder="Enter your agent name"
                  />
                </div>

                <div class="relative">
                  <label class="block text-xs font-medium text-gray-700  mb-1">Category</label>
                  <button 
                    @click.prevent="toggleCategoryDropdown"
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500/20 focus:border-blue-500 bg-white  text-gray-900  transition-all duration-200 text-left flex items-center justify-between text-sm"
                  >
                    <span>{{ getCategoryLabel(form.category) || 'Select category' }}</span>
                    <svg class="w-3 h-3 text-gray-400  transition-transform duration-200" :class="{ 'rotate-180': showCategoryDropdown }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                  
                  <!-- Category Dropdown -->
                  <div v-if="showCategoryDropdown" class="absolute top-full left-0 mt-1 w-full bg-white  rounded-md shadow-lg border border-gray-200  p-1 z-50 max-h-40 overflow-y-auto">
                    <div class="space-y-1">
                      <button
                        v-for="category in categoryOptions"
                        :key="category.value"
                        @click.prevent="selectCategory(category.value)"
                        class="w-full text-left px-2 py-1.5 rounded-sm hover:bg-gray-50  transition-all duration-200 text-xs text-gray-700  hover:text-gray-900 "
                      >
                        {{ category.label }}
                      </button>
                    </div>
                  </div>
                </div>

                <!-- Custom Category Input -->
                <div v-if="form.category === 'other'" class="md:col-span-2">
                  <label class="block text-xs font-medium text-gray-700  mb-1">Custom Category</label>
                  <input 
                    v-model="form.customCategory"
                    type="text" 
                    class="w-full px-3 py-2 text-sm border border-gray-300  rounded-md bg-white  text-gray-900  focus:outline-none focus:ring-1 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-200"
                    placeholder="Enter your custom category name"
                  />
                </div>

                <div class="md:col-span-2">
                  <label class="block text-xs font-medium text-gray-700  mb-1">Description</label>
                  <textarea 
                    v-model="form.description"
                    required
                    rows="2"
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500/20 focus:border-blue-500 bg-white  text-gray-900  transition-all duration-200 resize-none text-sm"
                    placeholder="Describe what your agent does and its capabilities"
                  ></textarea>
                </div>

                <div class="md:col-span-2">
                  <label class="block text-xs font-medium text-gray-700  mb-1">System Prompt</label>
                  <textarea 
                    v-model="form.prompt"
                    required
                    rows="3"
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500/20 focus:border-blue-500 bg-white  text-gray-900  transition-all duration-200 resize-none text-sm"
                    placeholder="Enter the system prompt that defines your agent's behavior, personality, and capabilities."
                  ></textarea>
                  <p class="text-xs text-gray-500  mt-1">This prompt will define your agent's personality and behavior.</p>
                </div>
              </div>
            </div>

            <!-- Agent Capabilities Section -->
            <div class="bg-white  rounded-xl shadow-sm border border-gray-200  p-6">
              <div class="flex items-center mb-4">
                <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-3">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900 ">Agent Capabilities</h2>
              </div>

              <div class="space-y-3">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div>
                    <label class="block text-xs font-medium text-gray-700  mb-1">Primary Function</label>
                    <input 
                      v-model="form.primaryFunction"
                      type="text" 
                      class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-green-500/20 focus:border-green-500 bg-white  text-gray-900  transition-all duration-200 text-sm"
                      placeholder="e.g., Customer Support, Content Creation"
                    />
                  </div>
                  
                  <div>
                    <label class="block text-xs font-medium text-gray-700  mb-1">Specialization</label>
                    <input 
                      v-model="form.specialization"
                      type="text" 
                      class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-green-500/20 focus:border-green-500 bg-white  text-gray-900  transition-all duration-200 text-sm"
                      placeholder="e.g., Healthcare, Finance, E-commerce"
                    />
                  </div>
                </div>
                
                <div>
                  <label class="block text-xs font-medium text-gray-700  mb-1">Key Skills</label>
                  <textarea 
                    v-model="form.keySkills"
                    rows="2"
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-green-500/20 focus:border-green-500 bg-white  text-gray-900  transition-all duration-200 resize-none text-sm"
                    placeholder="e.g., Natural Language Processing, Data Analysis, Customer Service"
                  ></textarea>
                </div>
              </div>
            </div>

            <!-- Tool Library Section -->
            <div class="bg-white  rounded-xl shadow-sm border border-gray-200  p-6">
              <div class="flex items-center mb-4">
                <div class="w-8 h-8 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-3">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900 ">Tool Library</h2>
              </div>

              <div class="space-y-4">
                <!-- Tool Type Selection (Multi-select) -->
                <div>
                  <label class="block text-sm font-medium text-gray-700  mb-2">Select Tool Types</label>
                  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                    <button
                      v-for="(type, index) in toolTypes"
                      :key="index"
                      type="button"
                      @click.prevent="toggleToolType(type.value)"
                      :class="[
                        'p-3 rounded-lg border transition-all duration-200 text-left',
                        form.toolLibrary.selectedTypes.includes(type.value)
                          ? getSelectedCardClass(type.value)
                          : getUnselectedCardClass(type.value)
                      ]"
                    >
                      <div class="flex items-center mb-2">
                        <div class="w-5 h-5 rounded-md flex items-center justify-center mr-2" :class="type.color">
                          <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="type.icon" />
                          </svg>
                        </div>
                        <h3 class="font-medium text-sm text-gray-900 ">{{ type.name }}</h3>
                      </div>
                      <p class="text-sm text-gray-600 ">{{ type.description }}</p>
                    </button>
                  </div>
                </div>

                <!-- Built-in Tools Configuration -->
                <div v-if="form.toolLibrary.selectedTypes.includes('builtin')" class="space-y-2">
                  <div class="flex items-center justify-between">
                    <h4 class="text-xs font-medium text-gray-700 ">Built-in Tools</h4>
                    <span class="text-xs text-gray-500 ">{{form.toolLibrary.builtinTools.filter(t => t.isSelected).length}} selected</span>
                  </div>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                    <div 
                      v-for="(tool, index) in form.toolLibrary.builtinTools" 
                      :key="index"
                      class="p-2 rounded-md border border-gray-200  hover:border-purple-300  transition-colors duration-200"
                      :class="tool.isSelected ? 'border-purple-500  bg-purple-50 ' : 'bg-gray-50 '"
                    >
                      <div class="flex items-start justify-between mb-1">
                        <div class="flex items-center">
                          <input 
                            v-model="tool.isSelected"
                            type="checkbox" 
                            class="w-3 h-3 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500   focus:ring-1  "
                          />
                          <h5 class="ml-2 text-xs font-medium text-gray-900 ">{{ tool.name }}</h5>
                        </div>
                        <div class="w-4 h-4 rounded-sm flex items-center justify-center text-xs font-bold text-white" :class="tool.color">
                          {{ tool.icon }}
                        </div>
                      </div>
                      <p class="text-xs text-gray-600 ">{{ tool.description }}</p>
                    </div>
                  </div>
                </div>

                <!-- MCP Services Configuration -->
                <div v-if="form.toolLibrary.selectedTypes.includes('mcp')" class="space-y-2">
                  <div class="flex items-center justify-between">
                    <h4 class="text-xs font-medium text-gray-700 ">MCP Services</h4>
                    <button
                      type="button"
                      @click.prevent="addMcpService"
                      class="text-xs text-purple-600  hover:text-purple-700 "
                    >
                      + Add Service
                    </button>
                  </div>
                  <div class="space-y-2">
                    <div 
                      v-for="(service, index) in form.toolLibrary.mcpServices" 
                      :key="index"
                      class="p-2 rounded-md border border-gray-200  bg-gray-50 "
                    >
                      <div class="flex items-center justify-between mb-2">
                        <h5 class="text-xs font-medium text-gray-900 ">MCP Service {{ index + 1 }}</h5>
                        <button
                          type="button"
                          @click.prevent="removeMcpService(index)"
                          class="text-red-500 hover:text-red-700  "
                        >
                          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Service Name</label>
                          <input 
                            v-model="service.name"
                            type="text" 
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                            placeholder="e.g., File System MCP"
                          />
                        </div>
                        
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Claude Code Bash</label>
                          <input 
                            v-model="service.serverUrl"
                            type="url" 
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                            placeholder="claude mcp add <mcp_server> <mcp_args>"
                          />
                        </div>
                      </div>
                      
                      <div class="mt-2">
                        <label class="block text-xs font-medium text-gray-700  mb-1">Capabilities</label>
                        <input 
                          v-model="service.capabilities"
                          type="text" 
                          class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                          placeholder="file_system, database, web_search"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Personal Expertise Configuration -->
                <div v-if="form.toolLibrary.selectedTypes.includes('expertise')" class="space-y-3">
                  <div class="flex items-center justify-between">
                    <h4 class="text-sm font-medium text-gray-700 ">Personal Expertise</h4>
                    <span class="text-xs text-gray-500 ">Your unique domain knowledge</span>
                  </div>
                  
                  <!-- Input Method Selection -->
                  <div class="space-y-2">
                    <label class="block text-xs font-medium text-gray-700 ">Input Method</label>
                    <div class="flex space-x-4">
                      <label class="flex items-center">
                        <input 
                          v-model="form.toolLibrary.expertise.inputMethod"
                          type="radio" 
                          value="manual"
                          class="w-3 h-3 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500   focus:ring-1  "
                        />
                        <span class="ml-2 text-xs text-gray-700 ">Manual Input</span>
                      </label>
                      <label class="flex items-center">
                        <input 
                          v-model="form.toolLibrary.expertise.inputMethod"
                          type="radio" 
                          value="file"
                          class="w-3 h-3 text-orange-600 bg-gray-100 border-gray-300 focus:ring-orange-500   focus:ring-1  "
                        />
                        <span class="ml-2 text-xs text-gray-700 ">Upload File</span>
                      </label>
                    </div>
                  </div>
                  
                  <!-- Manual Input Section -->
                  <div v-if="form.toolLibrary.expertise.inputMethod === 'manual'" class="space-y-3">
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Domain Expertise</label>
                      <input 
                        v-model="form.toolLibrary.expertise.domain"
                        type="text" 
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                        placeholder="e.g., Healthcare, Finance, E-commerce, Marketing"
                      />
                    </div>
                    
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Years of Experience</label>
                      <input 
                        v-model="form.toolLibrary.expertise.experience"
                        type="text" 
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                        placeholder="e.g., 5+ years in healthcare management, 3 years in fintech"
                      />
                    </div>
                    
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Problem-Solving Approach</label>
                      <textarea 
                        v-model="form.toolLibrary.expertise.problemSolving"
                        rows="2"
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                        placeholder="Describe your unique approach to solving problems in this domain..."
                      ></textarea>
                    </div>
                    
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Best Practices & Insights</label>
                      <textarea 
                        v-model="form.toolLibrary.expertise.bestPractices"
                        rows="2"
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                        placeholder="Share your proven best practices and key insights..."
                      ></textarea>
                    </div>
                    
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Case Studies & Examples</label>
                      <textarea 
                        v-model="form.toolLibrary.expertise.caseStudies"
                        rows="2"
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                        placeholder="Describe specific cases or examples where you applied your expertise..."
                      ></textarea>
                    </div>
                    
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Unique Insights</label>
                      <textarea 
                        v-model="form.toolLibrary.expertise.insights"
                        rows="2"
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                        placeholder="Share unique insights that can't be found online..."
                      ></textarea>
                    </div>
                  </div>
                  
                  <!-- File Upload Section -->
                  <div v-if="form.toolLibrary.expertise.inputMethod === 'file'" class="space-y-3">
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">Upload Expertise Files</label>
                      <div class="border-2 border-dashed border-gray-300  rounded-lg p-4 text-center hover:border-orange-400  transition-colors duration-200">
                        <input 
                          ref="expertiseFileInput"
                          type="file" 
                          multiple
                          accept=".pdf,.doc,.docx,.txt,.md"
                          @change="handleExpertiseFileUpload"
                          class="hidden"
                        />
                        <div class="space-y-2">
                          <svg class="mx-auto h-8 w-8 text-gray-400 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                          </svg>
                          <div class="text-sm text-gray-600 ">
                            <button 
                              type="button"
                              @click.prevent="expertiseFileInput?.click()"
                              class="font-medium text-orange-600  hover:text-orange-500 "
                            >
                              Click to upload
                            </button>
                            <span> or drag and drop</span>
                          </div>
                          <p class="text-xs text-gray-500 ">
                            PDF, DOC, DOCX, TXT, MD files (max 10MB each)
                          </p>
                        </div>
                      </div>
                    </div>
                    
                    <!-- Uploaded Files List -->
                    <div v-if="form.toolLibrary.expertise.uploadedFiles.length > 0" class="space-y-2">
                      <label class="block text-xs font-medium text-gray-700 ">Uploaded Files</label>
                      <div class="space-y-1">
                        <div 
                          v-for="(file, index) in form.toolLibrary.expertise.uploadedFiles" 
                          :key="index"
                          class="flex items-center justify-between p-2 bg-gray-50  rounded-md"
                        >
                          <div class="flex items-center space-x-2">
                            <svg class="w-4 h-4 text-gray-500 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            <span class="text-xs text-gray-700 ">{{ file.name }}</span>
                            <span class="text-xs text-gray-500 ">({{ formatExpertiseFileSize(file.size) }})</span>
                          </div>
                          <button 
                            type="button"
                            @click.prevent="removeExpertiseFile(index)"
                            class="text-red-500 hover:text-red-700  "
                          >
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                    
                    <!-- File Description -->
                    <div>
                      <label class="block text-xs font-medium text-gray-700  mb-1">File Description</label>
                      <textarea 
                        v-model="form.toolLibrary.expertise.fileDescription"
                        rows="2"
                        class="w-full px-3 py-2 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                        placeholder="Briefly describe what these files contain and how they represent your expertise..."
                      ></textarea>
                    </div>
                  </div>
                </div>

                <!-- Custom API Services Configuration -->
                <div v-if="form.toolLibrary.selectedTypes.includes('api')" class="space-y-2">
                  <div class="flex items-center justify-between">
                    <h4 class="text-xs font-medium text-gray-700 ">Custom API Services</h4>
                    <button
                      type="button"
                      @click.prevent="addApiService"
                      class="text-xs text-green-600  hover:text-green-700 "
                    >
                      + Add Service
                    </button>
                  </div>
                  <div class="space-y-2">
                    <div 
                      v-for="(service, index) in form.toolLibrary.apiServices" 
                      :key="index"
                      class="p-2 rounded-md border border-gray-200  bg-gray-50 "
                    >
                      <div class="flex items-center justify-between mb-2">
                        <h5 class="text-xs font-medium text-gray-900 ">API Service {{ index + 1 }}</h5>
                        <button
                          type="button"
                          @click.prevent="removeApiService(index)"
                          class="text-red-500 hover:text-red-700  "
                        >
                          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Service Name</label>
                          <input 
                            v-model="service.name"
                            type="text" 
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                            placeholder="e.g., Weather API"
                          />
                        </div>
                        
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">API Endpoint</label>
                          <input 
                            v-model="service.endpoint"
                            type="url" 
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                            placeholder="https://api.weather.com/v1/current"
                          />
                        </div>
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2">
                        <div class="relative">
                          <label class="block text-xs font-medium text-gray-700  mb-1">HTTP Method</label>
                          <button 
                            @click.prevent="toggleApiMethodDropdown(index)"
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-green-500/20 focus:border-green-500 bg-white  text-gray-900  transition-all duration-200 text-left flex items-center justify-between"
                          >
                            <span>{{ getApiMethodLabel(service.method) }}</span>
                            <svg class="w-2 h-2 text-gray-400  transition-transform duration-200" :class="{ 'rotate-180': showApiMethodDropdown === index }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                          </button>
                          
                          <!-- API Method Dropdown -->
                          <div v-if="showApiMethodDropdown === index" class="absolute top-full left-0 mt-1 w-full bg-white  rounded-md shadow-lg border border-gray-200  p-1 z-50">
                            <div class="space-y-1">
                              <button
                                v-for="method in apiMethodOptions"
                                :key="method.value"
                                @click.prevent="selectApiMethod(index, method.value)"
                                class="w-full text-left px-2 py-1 rounded-sm hover:bg-gray-50  transition-all duration-200 text-xs text-gray-700  hover:text-gray-900 "
                              >
                                {{ method.label }}
                              </button>
                            </div>
                          </div>
                        </div>
                        
                        <div class="relative">
                          <label class="block text-xs font-medium text-gray-700  mb-1">Auth Type</label>
                          <button 
                            @click.prevent="toggleApiAuthDropdown(index)"
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-green-500/20 focus:border-green-500 bg-white  text-gray-900  transition-all duration-200 text-left flex items-center justify-between"
                          >
                            <span>{{ getApiAuthLabel(service.auth) }}</span>
                            <svg class="w-2 h-2 text-gray-400  transition-transform duration-200" :class="{ 'rotate-180': showApiAuthDropdown === index }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                          </button>
                          
                          <!-- API Auth Dropdown -->
                          <div v-if="showApiAuthDropdown === index" class="absolute top-full left-0 mt-1 w-full bg-white  rounded-md shadow-lg border border-gray-200  p-1 z-50">
                            <div class="space-y-1">
                              <button
                                v-for="auth in apiAuthOptions"
                                :key="auth.value"
                                @click.prevent="selectApiAuth(index, auth.value)"
                                class="w-full text-left px-2 py-1 rounded-sm hover:bg-gray-50  transition-all duration-200 text-xs text-gray-700  hover:text-gray-900 "
                              >
                                {{ auth.label }}
                              </button>
                            </div>
                          </div>
                        </div>
                        
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Timeout (s)</label>
                          <input 
                            v-model.number="service.timeout"
                            type="number" 
                            min="1"
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                            placeholder="30"
                          />
                        </div>
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Request Headers (JSON)</label>
                          <textarea 
                            v-model="service.headers"
                            rows="2"
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                            placeholder='{"Content-Type": "application/json", "Authorization": "Bearer token"}'
                          ></textarea>
                        </div>
                        
                        <div>
                          <label class="block text-xs font-medium text-gray-700  mb-1">Request Body (JSON)</label>
                          <textarea 
                            v-model="service.requestBody"
                            rows="2"
                            class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900  resize-none"
                            placeholder='{"query": "{{user_input}}", "limit": 10}'
                          ></textarea>
                        </div>
                      </div>
                      
                      <div class="mt-2">
                        <label class="block text-xs font-medium text-gray-700  mb-1">Description</label>
                        <input 
                          v-model="service.description"
                          type="text" 
                          class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                          placeholder="Describe what this API service provides..."
                        />
                      </div>
                      
                      <div class="mt-2">
                        <label class="block text-xs font-medium text-gray-700  mb-1">Capabilities</label>
                        <input 
                          v-model="service.capabilities"
                          type="text" 
                          class="w-full px-2 py-1 text-xs border border-gray-300  rounded-md bg-white  text-gray-900 "
                          placeholder="e.g., weather_data, location_search, forecast"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Pricing Section -->
            <div class="bg-white  rounded-xl shadow-sm border border-gray-200  p-6">
              <div class="flex items-center mb-4">
                <div class="w-8 h-8 bg-gradient-to-br from-pink-500 to-pink-600 rounded-lg flex items-center justify-center mr-3">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                  </svg>
                </div>
                <h2 class="text-lg font-semibold text-gray-900 ">Pricing</h2>
              </div>

              <div class="space-y-3">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div class="relative">
                    <label class="block text-xs font-medium text-gray-700  mb-1">Pricing Model</label>
                    <button 
                      @click.prevent="togglePricingDropdown"
                      class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-pink-500/20 focus:border-pink-500 bg-white  text-gray-900  transition-all duration-200 text-left flex items-center justify-between text-sm"
                    >
                      <span>{{ getPricingLabel(form.pricing.model) }}</span>
                      <svg class="w-3 h-3 text-gray-400  transition-transform duration-200" :class="{ 'rotate-180': showPricingDropdown }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                    
                    <!-- Pricing Dropdown -->
                    <div v-if="showPricingDropdown" class="absolute top-full left-0 mt-1 w-full bg-white  rounded-md shadow-lg border border-gray-200  p-1 z-50">
                      <div class="space-y-1">
                        <button
                          v-for="pricing in pricingOptions"
                          :key="pricing.value"
                          @click.prevent="selectPricing(pricing.value)"
                          class="w-full text-left px-2 py-1.5 rounded-sm hover:bg-gray-50  transition-all duration-200 text-xs text-gray-700  hover:text-gray-900 "
                        >
                          {{ pricing.label }}
                        </button>
                      </div>
                    </div>
                  </div>

                  <div v-if="form.pricing.model === 'paid' || form.pricing.model === 'freemium'">
                    <label class="block text-xs font-medium text-gray-700  mb-1">Price (USD)</label>
                    <input 
                      v-model.number="form.pricing.price"
                      type="number" 
                      min="0"
                      step="0.01"
                      class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-pink-500/20 focus:border-pink-500 bg-white  text-gray-900  transition-all duration-200 text-sm"
                      placeholder="0.00"
                    />
                  </div>
                </div>

                <div v-if="form.pricing.model === 'freemium'">
                  <label class="block text-xs font-medium text-gray-700  mb-1">Free Usage Limit</label>
                  <input 
                    v-model.number="form.pricing.usageLimit"
                    type="number" 
                    min="1"
                    class="w-full px-3 py-2 border border-gray-300  rounded-md focus:outline-none focus:ring-1 focus:ring-pink-500/20 focus:border-pink-500 bg-white  text-gray-900  transition-all duration-200 text-sm"
                    placeholder="100"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- Action Button -->
          <div class="flex justify-center mt-8">
            <button 
              type="submit"
              :disabled="isSubmitting"
              class="px-8 py-3 text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-700 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              {{ isSubmitting ? 'Building Your AI...' : 'Create Your AI Agent' }}
            </button>
          </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import type { AgentFormData } from '../types'

  const router = useRouter()

  // State
  const isSubmitting = ref(false)
  const fileInput = ref<HTMLInputElement | null>(null)
  const expertiseFileInput = ref<HTMLInputElement | null>(null)

  // Dropdown states
  const showCategoryDropdown = ref(false)
  const showPricingDropdown = ref(false)
  const showMcpAuthDropdown = ref<number | null>(null)
  const showApiMethodDropdown = ref<number | null>(null)
  const showApiAuthDropdown = ref<number | null>(null)
  const showKnowledgeAuthDropdown = ref(false)
  const showKnowledgeMethodDropdown = ref(false)
  const showUpdateFrequencyDropdown = ref(false)

  // Dropdown options
  const categoryOptions = [
    { value: 'coding', label: 'Coding Agent' },
    { value: 'writing', label: 'Writing Agent' },
    { value: 'design', label: 'Design Agent' },
    { value: 'marketing', label: 'Marketing Agent' },
    { value: 'customer-service', label: 'Customer Service' },
    { value: 'data-analysis', label: 'Data Analysis' },
    { value: 'education', label: 'Education' },
    { value: 'healthcare', label: 'Healthcare' },
    { value: 'finance', label: 'Finance' },
    { value: 'other', label: 'Other' }
  ]

  const pricingOptions = [
    { value: 'free', label: 'Free' },
    { value: 'paid', label: 'Paid' },
    { value: 'freemium', label: 'Freemium' },
  ]

  const toolTypes = [
    {
      value: 'builtin',
      name: 'Built-in Tools',
      description: 'Pre-configured tools',
      icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
      color: 'bg-blue-500'
    },
    {
      value: 'mcp',
      name: 'MCP Services',
      description: 'Model Context Protocol',
      icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
      color: 'bg-purple-500'
    },
    {
      value: 'api',
      name: 'Custom APIs',
      description: 'Your own APIs',
      icon: 'M13 10V3L4 14h7v7l9-11h-7z',
      color: 'bg-green-500'
    },
    {
      value: 'expertise',
      name: 'Personal Expertise',
      description: 'Your domain knowledge & experience',
      icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
      color: 'bg-orange-500'
    }
  ]

  const builtinTools = [
    {
      name: 'Web Search',
      description: 'Search the web for real-time information',
      icon: '🔍',
      color: 'bg-blue-500',
      isSelected: false,
      config: {
        placeholder: 'Search query'
      }
    },
    {
      name: 'File Manager',
      description: 'Read, write, and manage files',
      icon: '📁',
      color: 'bg-green-500',
      isSelected: false,
      config: {
        placeholder: 'File path'
      }
    },
    {
      name: 'Database',
      description: 'Query and manage databases',
      icon: '🗄️',
      color: 'bg-purple-500',
      isSelected: false,
      config: {
        placeholder: 'SQL query'
      }
    },
    {
      name: 'Email',
      description: 'Send and receive emails',
      icon: '📧',
      color: 'bg-orange-500',
      isSelected: false,
      config: {
        placeholder: 'Email address'
      }
    }
  ]

  const mcpAuthOptions = [
    { value: 'none', label: 'No Authentication' },
    { value: 'token', label: 'Token' },
    { value: 'api-key', label: 'API Key' },
    { value: 'oauth', label: 'OAuth' }
  ]

  const apiMethodOptions = [
    { value: 'GET', label: 'GET' },
    { value: 'POST', label: 'POST' },
    { value: 'PUT', label: 'PUT' },
    { value: 'DELETE', label: 'DELETE' },
    { value: 'PATCH', label: 'PATCH' }
  ]

  const apiAuthOptions = [
    { value: 'none', label: 'No Authentication' },
    { value: 'bearer', label: 'Bearer Token' },
    { value: 'api-key', label: 'API Key' },
    { value: 'basic', label: 'Basic Auth' },
    { value: 'oauth', label: 'OAuth' }
  ]

  const knowledgeAuthOptions = [
    { value: 'none', label: 'No Authentication' },
    { value: 'token', label: 'Token' },
    { value: 'api-key', label: 'API Key' }
  ]

  const knowledgeMethodOptions = [
    { value: 'GET', label: 'GET' },
    { value: 'POST', label: 'POST' }
  ]

  const updateFrequencyOptions = [
    { value: 'realtime', label: 'Real-time' },
    { value: 'hourly', label: 'Hourly' },
    { value: 'daily', label: 'Daily' },
    { value: 'weekly', label: 'Weekly' },
    { value: 'manual', label: 'Manual' }
  ]

  const form = reactive({
    name: '',
    category: '',
    customCategory: '',
    description: '',
    prompt: '',
    primaryFunction: '',
    specialization: '',
    keySkills: '',
    toolLibrary: {
      selectedTypes: [] as string[],
      builtinTools: [
        {
          name: 'Web Search',
          description: 'Search the web for real-time information',
          icon: '🔍',
          color: 'bg-blue-500',
          isSelected: false
        },
        {
          name: 'File Manager',
          description: 'Read, write, and manage files',
          icon: '📁',
          color: 'bg-green-500',
          isSelected: false
        },
        {
          name: 'Database',
          description: 'Query and manage databases',
          icon: '🗄️',
          color: 'bg-purple-500',
          isSelected: false
        },
        {
          name: 'Email',
          description: 'Send and receive emails',
          icon: '📧',
          color: 'bg-orange-500',
          isSelected: false
        }
      ],
      mcpServices: [] as Array<{
        name: string;
        serverUrl: string;
        auth: string;
        capabilities: string;
        description: string;
      }>,
      apiServices: [] as Array<{
        name: string;
        endpoint: string;
        method: string;
        auth: string;
        timeout: number;
        credentials: string;
        headers: string;
        requestBody: string;
        description: string;
        capabilities: string;
      }>,
      expertise: {
        inputMethod: 'manual',
        domain: '',
        experience: '',
        problemSolving: '',
        bestPractices: '',
        caseStudies: '',
        insights: '',
        uploadedFiles: [] as File[],
        fileDescription: ''
      }
    },
    knowledgeBase: {
      type: 'none' as 'none' | 'text' | 'file' | 'api',
      textContent: '',
      files: [] as File[],
      apiEndpoint: '',
      authMethod: 'none' as 'none' | 'token' | 'api-key',
      requestMethod: 'GET' as 'GET' | 'POST',
      updateFrequency: 'daily' as 'realtime' | 'hourly' | 'daily' | 'weekly' | 'manual'
    },
    pricing: {
      model: 'free' as 'free' | 'paid' | 'freemium' | 'usage',
      price: 0,
      usageLimit: 100
    }
  })

  // Methods
  const toggleToolType = (type) => {
    const index = form.toolLibrary.selectedTypes.indexOf(type)
    if (index > -1) {
      form.toolLibrary.selectedTypes.splice(index, 1)
    } else {
      form.toolLibrary.selectedTypes.push(type)
    }
  }

  const getSelectedCardClass = (type) => {
    switch (type) {
      case 'builtin':
        return 'border-blue-500 bg-blue-50'
      case 'mcp':
        return 'border-purple-500 bg-purple-50'
      case 'api':
        return 'border-green-500 bg-green-50'
      case 'expertise':
        return 'border-orange-500 bg-orange-50'
      default:
        return 'border-purple-500  bg-purple-50 '
    }
  }

  const getUnselectedCardClass = (type) => {
    switch (type) {
      case 'builtin':
        return 'border-gray-200 hover:border-blue-300 bg-gray-50'
      case 'mcp':
        return 'border-gray-200  hover:border-purple-300  bg-gray-50 '
      case 'api':
        return 'border-gray-200 hover:border-green-300 bg-gray-50'
      case 'expertise':
        return 'border-gray-200 hover:border-orange-300 bg-gray-50'
      default:
        return 'border-gray-200  hover:border-purple-300  bg-gray-50 '
    }
  }

  const toggleCategoryDropdown = () => {
    showCategoryDropdown.value = !showCategoryDropdown.value
    closeOtherDropdowns(['category'])
  }

  const selectCategory = (value) => {
    form.category = value
    // Clear custom category when selecting a predefined category
    if (value !== 'other') {
      form.customCategory = ''
    }
    showCategoryDropdown.value = false
  }

  const getCategoryLabel = (value) => {
    if (value === 'other' && form.customCategory) {
      return form.customCategory
    }
    const category = categoryOptions.find(cat => cat.value === value)
    return category ? category.label : ''
  }

  const togglePricingDropdown = () => {
    showPricingDropdown.value = !showPricingDropdown.value
    closeOtherDropdowns(['pricing'])
  }

  const selectPricing = (value) => {
    form.pricing.model = value
    showPricingDropdown.value = false
  }

  const getPricingLabel = (value) => {
    const pricing = pricingOptions.find(p => p.value === value)
    return pricing ? pricing.label : ''
  }

  const toggleMcpAuthDropdown = (index) => {
    showMcpAuthDropdown.value = showMcpAuthDropdown.value === index ? null : index
    closeOtherDropdowns(['mcpAuth'])
  }

  const selectMcpAuth = (index, value) => {
    form.toolLibrary.mcpServices[index].auth = value
    showMcpAuthDropdown.value = null
  }

  const getMcpAuthLabel = (value) => {
    const auth = mcpAuthOptions.find(a => a.value === value)
    return auth ? auth.label : 'No Authentication'
  }

  const toggleApiMethodDropdown = (index) => {
    showApiMethodDropdown.value = showApiMethodDropdown.value === index ? null : index
    closeOtherDropdowns(['apiMethod'])
  }

  const selectApiMethod = (index, value) => {
    form.toolLibrary.apiServices[index].method = value
    showApiMethodDropdown.value = null
  }

  const getApiMethodLabel = (value) => {
    const method = apiMethodOptions.find(m => m.value === value)
    return method ? method.label : 'GET'
  }

  const toggleApiAuthDropdown = (index) => {
    showApiAuthDropdown.value = showApiAuthDropdown.value === index ? null : index
    closeOtherDropdowns(['apiAuth'])
  }

  const selectApiAuth = (index, value) => {
    form.toolLibrary.apiServices[index].auth = value
    showApiAuthDropdown.value = null
  }

  const getApiAuthLabel = (value) => {
    const auth = apiAuthOptions.find(a => a.value === value)
    return auth ? auth.label : 'No Authentication'
  }

  const toggleKnowledgeAuthDropdown = () => {
    showKnowledgeAuthDropdown.value = !showKnowledgeAuthDropdown.value
    closeOtherDropdowns(['knowledgeAuth'])
  }

  const selectKnowledgeAuth = (value) => {
    form.knowledgeBase.authMethod = value
    showKnowledgeAuthDropdown.value = false
  }

  const getKnowledgeAuthLabel = (value) => {
    const auth = knowledgeAuthOptions.find(a => a.value === value)
    return auth ? auth.label : 'No Authentication'
  }

  const toggleKnowledgeMethodDropdown = () => {
    showKnowledgeMethodDropdown.value = !showKnowledgeMethodDropdown.value
    closeOtherDropdowns(['knowledgeMethod'])
  }

  const selectKnowledgeMethod = (value) => {
    form.knowledgeBase.requestMethod = value
    showKnowledgeMethodDropdown.value = false
  }

  const getKnowledgeMethodLabel = (value) => {
    const method = knowledgeMethodOptions.find(m => m.value === value)
    return method ? method.label : 'GET'
  }

  const toggleUpdateFrequencyDropdown = () => {
    showUpdateFrequencyDropdown.value = !showUpdateFrequencyDropdown.value
    closeOtherDropdowns(['updateFrequency'])
  }

  const selectUpdateFrequency = (value) => {
    form.knowledgeBase.updateFrequency = value
    showUpdateFrequencyDropdown.value = false
  }

  const getUpdateFrequencyLabel = (value) => {
    const frequency = updateFrequencyOptions.find(f => f.value === value)
    return frequency ? frequency.label : 'Daily'
  }

  const addMcpService = () => {
    form.toolLibrary.mcpServices.push({
      name: '',
      serverUrl: '',
      auth: 'none',
      capabilities: '',
      description: ''
    })
  }

  const removeMcpService = (index) => {
    form.toolLibrary.mcpServices.splice(index, 1)
  }

  const addApiService = () => {
    form.toolLibrary.apiServices.push({
      name: '',
      endpoint: '',
      method: 'GET',
      auth: 'none',
      timeout: 30,
      credentials: '',
      headers: '',
      requestBody: '',
      description: '',
      capabilities: ''
    })
  }

  const removeApiService = (index) => {
    form.toolLibrary.apiServices.splice(index, 1)
  }

  // File handling methods
  const handleExpertiseFileUpload = (event: Event) => {
    const target = event.target as HTMLInputElement
    const files = Array.from(target.files || []) as File[]
    const maxSize = 10 * 1024 * 1024 // 10MB
    const allowedTypes = ['.pdf', '.doc', '.docx', '.txt', '.md']

    files.forEach((file: File) => {
      // Check file size
      if (file.size > maxSize) {
        alert(`File ${file.name} is too large. Maximum size is 10MB.`)
        return
      }

      // Check file type
      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase()
      if (!fileExtension || !allowedTypes.includes(fileExtension)) {
        alert(`File ${file.name} is not supported. Please upload PDF, DOC, DOCX, TXT, or MD files.`)
        return
      }

      // Add file to the list
      form.toolLibrary.expertise.uploadedFiles.push(file)
    })

    // Reset input
    target.value = ''
  }

  const removeExpertiseFile = (index: number) => {
    form.toolLibrary.expertise.uploadedFiles.splice(index, 1)
  }

  const formatExpertiseFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  const handleFileUpload = (event) => {
    const files = event.target.files
    if (files) {
      form.knowledgeBase.files = Array.from(files)
    }
  }

  const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  const removeFile = (index) => {
    form.knowledgeBase.files.splice(index, 1)
  }

  const closeOtherDropdowns = (exclude) => {
    if (!exclude.includes('category')) showCategoryDropdown.value = false
    if (!exclude.includes('pricing')) showPricingDropdown.value = false
    if (!exclude.includes('mcpAuth')) showMcpAuthDropdown.value = null
    if (!exclude.includes('apiMethod')) showApiMethodDropdown.value = null
    if (!exclude.includes('apiAuth')) showApiAuthDropdown.value = null
    if (!exclude.includes('knowledgeAuth')) showKnowledgeAuthDropdown.value = false
    if (!exclude.includes('knowledgeMethod')) showKnowledgeMethodDropdown.value = false
    if (!exclude.includes('updateFrequency')) showUpdateFrequencyDropdown.value = false
  }

  const handleSubmit = async () => {
    isSubmitting.value = true
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000))
      console.log('Form submitted:', form)
      // Redirect to marketplace or success page
      router.push('/marketplace')
    } catch (error) {
      console.error('Error submitting form:', error)
    } finally {
      isSubmitting.value = false
    }
  }

  // Lifecycle
  onMounted(() => {
    document.addEventListener('click', (event) => {
      const target = event.target as HTMLElement
      if (!target.closest('.relative')) {
        closeOtherDropdowns([])
      }
    })
  })

  onUnmounted(() => {
    document.removeEventListener('click', () => { })
  })
</script>
